<template>
    <div class="page" v-if="topList.length">
        <swiperM :list="bannerList" />
        <!-- 编辑器分类 -->
        <div class="radio-container">
            <RadioButtonGroupM line v-model="topTabActive" :list="topList" />
        </div>

        <template v-if="topList[topTabActive].code == -1">
            <template v-for="(item, index) in cateList" :key="item.id">
                <div class="title-group">
                    <div class="title">{{ item.name }}</div>
                    <!-- <div class="see-more" @click="onSeeMore(index)">
                        查看更多>>
                    </div> -->
                </div>
                <TemplateGroupM :list="allList[item.id]" v-if="allList[item.id] && allList[item.id].length" />
                <el-empty :image-size="150" description="换个词搜搜，或者联系客服定制" v-else />
            </template>
        </template>
        <template v-else>
            <div class="btn-group" v-if="renderCateList.length">
                <var-menu same-width v-model:show="item.show" v-for="(item, index) in renderCateList" :key="item.title">
                    <var-button type="primary">
                        <span>{{ getTitle(index, item) }}</span>
                        <var-icon size="16" name="chevron-down" />
                    </var-button>

                    <template #menu>
                        <var-cell @click="onTypeClick(index, 0)">全部</var-cell>
                        <var-cell v-for="dItem in item.data" :key="dItem.id" @click="onTypeClick(index, dItem.id)">
                            {{ dItem.name }}
                        </var-cell>
                    </template>
                </var-menu>
            </div>

            <div class="title-group">
                <div class="title">模板列表</div>
                <SearchGroupM @search="onSearch" />
            </div>

            <div class="loading-box" v-if="isLoading">
                <var-loading type="cube" />
            </div>

            <template v-else>
                <TemplateGroupM :list="list" v-if="list.length" />
                <el-empty :image-size="150" description="换个词搜搜，或者联系客服定制" v-else />
            </template>
        </template>
    </div>
</template>
<script setup>
import { useContent } from ".";
import { SetPlatformModuleViews } from "~/api";

const {
    bannerList,
    cateActive,
    cateActive2,
    topTabActive,
    topList,
    cateList,
    typeCateList,
    areaCateList,
    industryCateList,
    cate2,
    list,
    allList,
    isLoading,

    onSeeMore,
    GetAllList,
    GetType,
    GetList,
    onSearch,
    getTemplateCategory,
    getBanner,
} = useContent();

const typeList = reactive([
    // {
    //     show: false,
    //     title: "类型",
    //     data: typeCateList,
    // },
    {
        show: false,
        title: "行业",
        data: industryCateList,
    },
    {
        show: false,
        title: "面积",
        data: areaCateList,
    },
]);

const typeList2 = reactive([
    {
        show: false,
        title: "类型",
        data: cate2,
    },
    {
        show: false,
        title: "行业",
        data: [],
    },
]);

const renderCateList = computed(() => {

    if (topList.value[topTabActive.value].code == "template") {
        return typeList
    }

    if (topList.value[topTabActive.value].code == "courseware") {
        return typeList2;
    }

    return [];
});

const getTitle = (index, item) => {
    if (topList.value[topTabActive.value].code == "template") {
        if (cateActive[index] === 0) return item.title;
        else {
            let name = item.data.find((v) => v.id === cateActive[index]).name;
            return name.length > 3 ? name.slice(0, 3) + "..." : name;
        }
    } else if (topList.value[topTabActive.value].code == "courseware") {
        if (cateActive2[index] === 0) return item.title;
        else {
            let name = item.data.find((v) => v.id === cateActive2[index]).name;
            return name.length > 3 ? name.slice(0, 3) + "..." : name;
        }
    }
};

const onTypeClick = (index, active) => {
    if (topList.value[topTabActive.value].code == "template") {
        cateActive[index] = active;
        typeList[index].show = false;
    } else if (topList.value[topTabActive.value].code == "courseware") {
        cateActive2[index] = active;
        if (index == 0) {
            cateActive2[1] = 0;
            if (active == 0) {
                typeList2[1].data = [];
            } else {
                typeList2[1].data = typeList2[0].data.find(
                    (item) => item.id == active
                ).child;
            }
        }
        typeList2[index].show = false;
    }
    GetList();
};

onMounted(async () => {
    await GetType();
    GetAllList();
    getTemplateCategory();
    SetPlatformModuleViews({ name: "模板库" });
    getBanner(180);
});
</script>
<style lang="scss" scoped>
.page {
    background-color: #f5f5f5;
    min-height: calc(100vh - 44px);

    .radio-container {
        background-color: #fff;
        padding: 10px 15px;
    }

    :deep(.banner) {
        height: 175px;
    }

    .btn-group {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 13px 15px;
        background-color: #fff;

        .var-menu {
            flex: 1;
        }

        .var-button {
            width: 100%;
            height: 32px;
            border-radius: 20px;

            .var-icon {
                margin-left: 10px;
            }
        }
    }

    .title-group {
        padding: 15px;
        font-size: 17px;
        color: #333;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .see-more {
            color: #5085fb;
            cursor: pointer;
            text-decoration: none;
            font-size: 12px;
        }
    }
}

.loading-box {
    padding: 20px 0;
}
</style>
